<template>
    <el-row>
        <el-col :span="10">
            <el-form :model="form" label-width="120px">
                <el-form-item label="用户名">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="性别">
                    <el-select v-model="form.gender" placeholder="选择你的身份">
                        <el-option label="男" value="0" />
                        <el-option label="女" value="1" />
                        <el-option label="沃尔玛购物袋" value="2" />
                        <el-option label="保密" value="3" />
                    </el-select>
                </el-form-item>
                <el-form-item label="生日日期">
                    <el-col :span="11">
                        <n-date-picker v-model="form.timestamp" type="date" />
                    </el-col>
                </el-form-item>
                <el-form-item label="个人签名">
                    <el-input v-model="form.single" maxlength="200" :rows="4" type="textarea" show-word-limit />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">修改</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
</template>

<script setup>
const form = reactive({
    name: '',
    gender: '',
    timestamp: '',
    single: '',
})

const onSubmit = () => {
    console.log('submit!')
}
</script>

<style scoped>
.el-row {
    width: 100%;
    height: 100%;
}

.avatar {}
</style>